<template>
  <div class="project-main">
    <div class="content">
      <div class="header">
        <span class="title">项目专班编辑信息</span>
        <span class="back" @click="$router.go(-1)">返回</span>
      </div>
      <el-form
        ref="form"
        :model="form"
        label-position="top"
        :rules="rules"
        class="m-b-10"
      >
        <el-form-item label="项目专班名称" prop="class_name">
          <el-select
            v-model="form.class_name"
            filterable
            allow-create
            default-first-option
            placeholder="请输入或选择项目专班名称"
            @change="changeCLass"
          >
            <el-option
              v-for="item in options_class"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <div class="flex-form m-b-10">
          <el-form-item label="项目经理：">
            <!-- prop="class_project_manager"  -->
            <el-cascader
              v-model="form.class_project_manager"
              :options="options_organization"
              :props="{
                value: 'value',
                label: 'label',
              }"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item prop="project_executor" label="项目执行人：">
            <el-cascader
              v-model="form.project_executor"
              :options="options_organization"
              :props="{
                value: 'value',
                label: 'label',
              }"
              clearable
            ></el-cascader>
          </el-form-item>
        </div>
        <div class="flex-form m-b-10">
          <el-form-item prop="class_lead_department" label="牵头部门：">
            <el-cascader
              v-model="form.class_lead_department"
              :options="options_department"
              :props="{
                label: 'label',
                value: 'label',
              }"
            ></el-cascader>
          </el-form-item>
          <el-form-item prop="class_district" label="项目承接地：">
            <el-select
              v-model="form.class_district"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in options_district"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex-form m-b-10">
          <el-form-item prop="class_industry_department" label="行业主管部门：">
            <el-input
              type="text"
              v-model="form.class_industry_department"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item prop="class_security_department" label="要素保障部门：">
            <el-input
              type="text"
              v-model="form.class_security_department"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </div>
        <!--   <el-form-item  prop="class_project_manager" label="领导小组办公室负责专人：">
            <el-input
              type="text"
              v-model="form.v7"
              placeholder="请输入"
            ></el-input>
          </el-form-item> -->
        <el-form-item label="要素保障部门工作内容：">
          <el-input
            type="textarea"
            v-model="form.class_security_department_content"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="领导小组办公室负责专人工作内容：">
          <el-input
            type="textarea"
            v-model="form.class_lead_manager_content"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="save">保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  ClassProject1Show,
  ClassProjectEdit,
  RoleDownBox,
  OrgDownBox,
  GetClassInfo,
} from "@/api/project/detail";

import { ClassDropDownBox } from "@api/project";
export default {
  data() {
    return {
      rules: {
        class_name: [
          { required: true, message: "请输入项目专班名称", trigger: "blur" },
        ],
        class_project_manager: [
          { required: true, message: "请选择项目经理", trigger: "change" },
        ],
        project_executor: [
          { required: true, message: "请选择项目执行人", trigger: "change" },
        ],
        class_lead_department: [
          { required: true, message: "请选择牵头部门", trigger: "change" },
        ],
        class_district: [
          { required: true, message: "请选择项目承接地", trigger: "change" },
        ],
        class_industry_department: [
          { required: true, message: "请输入行业主管部门", trigger: "blur" },
        ],
        class_security_department: [
          { required: true, message: "请输入要素保障部门", trigger: "blur" },
        ],
      },
      options_organization: [],
      options_department: [],
      options_district: [
        { label: "小店区", value: "小店区" },
        { label: "迎泽区", value: "迎泽区" },
        { label: "杏花岭区", value: "杏花岭区" },
        { label: "万柏林区", value: "万柏林区" },
        { label: "尖草坪区", value: "尖草坪区" },
        { label: "晋源区", value: "晋源区" },
        { label: "古交市", value: "古交市" },
        { label: "清徐县", value: "清徐县" },
        { label: "阳曲县", value: "阳曲县" },
        { label: "娄烦县", value: "娄烦县" },
        { label: "中北高新区", value: "中北高新区" },
        { label: "西山示范区", value: "西山示范区" },
        { label: "清徐开发区", value: "清徐开发区" },
        { label: "阳曲示范区", value: "阳曲示范区" },
      ],
      form: {
        class_name: "",
        class_project_manager: "",
        project_executor: "",
        class_lead_department: "",
        class_district: "",
        class_industry_department: "",
        class_security_department: "",
        class_security_department_content: "",
        // class_lead_manager: "",
        class_lead_manager_content: "",
      },
      id: "",
      options_class: [],
      token: "",
    };
  },
  mounted() {
    this.token = localStorage.getItem("login");
    this.id = this.$route.params.id;
    this.getClassProject();
    this.getClass();
    this.RoleDownBox();
    this.OrgDownBox();
  },

  methods: {
    changeCLass(val) {
      console.log(val);
      this.GetClassInfo(val);
    },
    async GetClassInfo(class_name) {
      let res = await GetClassInfo({ class_name });
      console.log(res);
      if (res.code && res.code != 0) {
        // this.form.class_name = "";
        this.form.class_project_manager = "";
        this.form.project_executor = "";
        this.form.class_lead_department = "";
        this.form.class_district = "";
        this.form.class_industry_department = "";
        this.form.class_security_department = "";
        this.form.class_security_department_content = "";
        this.form.class_lead_manager_content = "";
      } else {
        this.form = {
          ...res,
          class_lead_department:
            res.class_lead_department == null
              ? ""
              : res.class_lead_department.split("/"),
          class_project_manager:
            res.class_project_manager == null
              ? ""
              : res.class_project_manager.split("/"),
          project_executor:
            res.project_executor == null ? "" : res.project_executor.split("/"),
        };
        // setTimeout(() => {
        //   this.save();
        // }, 500);
      }
    },
    async RoleDownBox() {
      // 四级下拉框
      let res = await RoleDownBox();
      this.options_organization = res;
      console.log(res);
      //  file_audit_people_id
    },
    async OrgDownBox() {
      // 三级下拉框
      let res = await OrgDownBox();
      this.options_department = res;
      console.log(res);
      //  file_audit_people_id
    },
    async getClass() {
      let res = await ClassDropDownBox();
      if (res.code && res.code != 0) {
      } else {
        let arr = [];
        res.map((item) => {
          item != "" ? arr.push({ label: item, value: item }) : "";
        });
        this.options_class = arr;
      }
    },
    async getClassProject() {
      let res = await ClassProject1Show({
        project_id: this.id,
      });
      if (res.code && res.code != 0) {
      } else {
        this.form = {
          ...res.data[0],
          class_lead_department:
            res.data[0].class_lead_department == null
              ? ""
              : res.data[0].class_lead_department.split("/"),
          class_project_manager:
            res.data[0].class_project_manager == null
              ? ""
              : res.data[0].class_project_manager.split("/"),
          project_executor:
            res.data[0].project_executor == null
              ? ""
              : res.data[0].project_executor.split("/"),
        };
      }
    },
    save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // class_lead_department: ["工作组", "区域经济合作部", "宣传推介组、驻外招商组副部长"]
          // class_project_manager: ["领导小组", "领导小组常副组长"]
          // project_executor:      ["工作组", "区域经济合作部", "宣传推介组、驻外招商组科员"]
          let value1 = [...this.form.class_project_manager];
          let value2 = [...this.form.project_executor];
          let value3 = [...this.form.class_lead_department];
          let id1 =
            value1.length > 0 ? value1[value1.length - 1].split("-")[1] : "";
          let id2 =
            value2.length > 0 ? value2[value2.length - 1].split("-")[1] : "";
          if (id2 == undefined) {
            this.$message.warning("请选择执行人,请具体到人员");
            return;
          }
          let res = await ClassProjectEdit({
            ...this.form,
            id: this.id,
            token: this.token,
            class_lead_department: value3.join("/"),
            class_project_manager: value1.length > 0 ? value1.join("/") : "",
            project_executor: value2.join("/"),
            class_project_manager_id: id1,
            project_executor_id: id2,
          });
          console.log(res);
          if (res.code == 0) {
            this.$message.success(res.msg);
            this.$router.go(-1);
          } else {
            this.$message.error(res.msg);
          }
        } else {
          this.$message.warning("请填写必填项！");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.project-main {
  background: #fafafa;
  height: 100%;
  overflow: hidden;
  text-align: left;
}
.content {
  padding: 0 30px;
  margin: 0 auto;
  max-width: 1500px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(189, 189, 189, 0.6);
  overflow: hidden;
}
.header {
  position: relative;
  height: 60px;
  line-height: 60px;
  border-bottom: 4px solid rgba(204, 204, 204, 0.35);
  span.title {
    display: inline-block;
    height: 60px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
    cursor: default;
  }
  span.back {
    position: absolute;
    right: 0;
    top: 9px;
    width: 100px;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    background: #5889dc;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
}
/deep/ .el-form {
  padding-top: 10px;
  width: 960px;
}
/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  line-height: 36px;
  opacity: 0.8;
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
/deep/ .el-input__inner {
  height: 32px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.flex-form {
  display: flex;
  justify-content: space-between;
  /deep/ .el-form-item {
    flex: 0 0 420px;
  }
}
/deep/ .el-textarea__inner {
  resize: none;
  height: 100px;
}

/deep/ .el-button {
  margin-top: 20px;
  padding: 0;
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: #446db3;
  border-radius: 8px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}
.m-b-10 {
  margin-bottom: 10px;
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
}
/deep/ .el-cascader,
/deep/ .el-select {
  width: 100%;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  /deep/ .el-form {
    transform: scale(0.9);
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform-origin: 0 0;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  /deep/ .el-form {
    transform: scale(0.86);
    -moz-transform: scale(0.86);
    -webkit-transform: scale(0.86);
    -o-transform: scale(0.86);
    transform-origin: 0 0;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/ .el-form {
    transform: scale(0.9);
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform-origin: 0 0;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  /deep/ .el-form {
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform-origin: 0 0;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  /deep/ .el-form {
    transform: scale(0.75);
    -moz-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    -o-transform: scale(0.75);
    transform-origin: 0 0;
  }
}
</style>
